// @-rules使用

@import '../lib/index.scss';
.wrap-box {
    width: 2rem;
    height: 2rem;
    background-color: nth($bgcolors, 2);
    font: {
        size: $fontSize;
    };
}

.#{$na} {
    h1 {
        color: orchid;
    }
}

.#{$pc} {
    h1 {
        color: rgb(142, 96, 141);
    }
}


// 媒体查询
// body {
//     @media (max-width: 200px) {
//         background-color: antiquewhite;
//     }
//     @media (min-width:200) and (max-width: 300) {
//         background-color: aqua;
//     }
//     @media (min-width: 300px) {
//         background-color: rgb(180, 120, 40);
//     }
// }


// map使用
body {
    $viewport: (
        'sm': '(max-width: 200px)',
        'md': '(min-width:200) and (max-width: 300)',
        'bg': '(min-width: 300px)'
    );
    @media #{map-get($viewport, 'sm')} {
        background-color: antiquewhite;
    }
    @media #{map-get($viewport, 'md')} {
        background-color: red;
    }
    @media #{map-get($viewport, 'bg')} {
        background-color: green;
    }
}


// 继承
.title1 {
    color: aqua;
    &:hover{
        color: green;
    }
}


.title2 {
    @extend .title1;
}

/* @at-root 跳出根元素 */
.wrap-box {
    .title3 {
        .child1 {
            .child2 {
                @at-root .child3 {
                    color: black;
                    font-size: .13rem / 1px;
                }
            }
        }
    }
}


// @if
$a: 4;

.ctx-box {
    .tx {
        @if $a == 1 {
            color: rgb(187, 30, 185);
        } @else if $a == 2 {
            color: rgb(3, 62, 150);
        } @else if $a == 3 {
            color: rgb(150, 3, 72);
        } @else {
            color: rgb(255, 255, 255);
        }
    }
}


// @for
@for $var from 1 to 10 {
    .test-#{$var} {
        background-color:url('http://www.baidu.com.#{$var}.jpg');
    }
}


// @each
$arr: 1, 2, 3, 4;
@each $var in $arr {
    .F-#{$var} {
        color: red;
    }
}

// @while
$nums: 3;
@while $nums > 0 {
    .B-#{var} {
        color: green;
    };
    $nums: $nums - 1;
}
